<template>
  <CustomPopup ref="customPopup" id="customPopup" v-show="popupShow">
    <template #default>
      <div class="w-full h-full overflow-auto">
        <div style="height: 800px">这是测试弹框</div>
      </div>
    </template>
  </CustomPopup>
</template>

<script setup lang="ts">
import CustomPopup from '@/components/CustomPopup/index.vue'
import { Popup } from '@antv/l7'
import { ref, onMounted } from 'vue'

const { $antvMap } = window

let mapObject: any = new $antvMap.MapObject()

let popup: any = new Popup({})

let popupShow = ref(false)
let customPopup = ref<any>({})

onMounted(async () => {
  await mapObject.isLoaded()

  popup.hide()
  mapObject.view.addPopup(popup)
})

const openPopup = (x: number, y: number) => {
  popupShow.value = true
  popup.setOptions({
    title: '测试标题',
    lngLat: {
      lng: x,
      lat: y,
    },
    stopPropagation: false,
    maxWidth: '500px',
    html: customPopup.value.$el,
  })
  popup.show()
  popup.panToPopup()
}

const closePopup = () => {
  popupShow.value = false
  popup.hide()
}

defineExpose({
  openPopup,
  closePopup,
})
</script>

<style lang="scss">
.l7-popup {
  .l7-popup-content {
    padding: 0;
    width: 500px;
    background: rgba($color: #000000, $alpha: 0.3) !important;
    .l7-popup-content__title {
      display: none;
    }
  }
  .l7-popup-tip {
    border-top-color: rgba($color: #000000, $alpha: 0.3);
  }
}
</style>
